<link rel="stylesheet" type="text/css" href="/component/element/multifile/public/static/webuploader-0.1.5/webuploader.css">
<script src="/component/element/multifile/public/static/webuploader-0.1.5/webuploader.min.js"></script>


<style>
    .webuploader-pick {
        background-color: var(--primary-color);
        /* 你想要的颜色 */
        color: #fff;
        /* 文字颜色 */
        border-color: var(--primary-color);
        /* 按钮边框颜色 */
    }

    .sortable-chosen {
        background-color: #577CB4;
    }
</style>
<a id="picker_<?php echo $name ?>">选择文件</a>
<table class="layui-table" id="table_<?php echo $name ?>">
    <thead>
        <tr>
            <th scope="col">文件</th>
            <th scope="col">文件大小</th>
            <th scope="col">上传进度</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php
        $vindx = 0;
        if (isset($value)) {
            if (is_array($value) ||  $value = is_json($value)) {
                foreach ($value as $key => $val) {
        ?>
                    <tr>
                        <td>
                            <input class="layui-input" type=" text" name="<?php echo $name ?>[<?php echo $vindx ?>][orgname]" value="<?php echo $val['orgname'] ?>" />
                        </td>
                        <td><?php echo $val['size'] ?></td>
                        <td><i class="iconfont" style="color:green">&#xe63c; </i></td>

                        <td>
                            <a class="iconfont delfile<?php echo $name; ?>" style="padding-right:8px">&#xe607;</a>

                            <a href="javascript:;" title="拖拽排序" class="drap" style="margin-right: 20px;cursor:move"> <i class="iconfont" style="font-size: 18px;">&#xe638;</i></a>
                        </td>
                        <input type="hidden" id="" value="<?php echo $val['size'] ?>" name="<?php echo $name ?>[<?php echo $vindx ?>][size]" />
                        <input type="hidden" id="" value="<?php echo $val['path'] ?>" name="<?php echo $name ?>[<?php echo $vindx ?>][path]" />
                    </tr>
        <?php
                    $vindx++;
                }
            }
        }
        ?>
    </tbody>
</table>
<script src="/static/admin/lib/Sortable/Sortable.min.js"></script>
<script>
    layui.use(function() {
        var form = layui.form;


        // 解决Sortable.create在火狐浏览器上会打开新窗口
        document.body.ondrop = function(event) {
            event.preventDefault();
            event.stopPropagation();
        }


        var sortable = new Sortable(document.querySelector('#table_<?php echo $name ?> tbody'), {
            animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
            dragClass: "sortable-drag", // 正在被拖拽中的css类名
            handle: '.drap', // handle's class
            // 列表单元拖放结束后的回调函数
            onEnd: function( /**Event*/ evt) {
                //可以写自己业务，其他的方法和参数参考文档：http://www.sortablejs.com/options.html 
                console.log(evt);
            },
        });



        var uploader = WebUploader.create({
            auto: true,
            // swf文件路径
            swf: '/component/element/multifile/public/static/webuploader-0.1.5/Uploader.swf',

            // 文件接收服务端。
            server: '/element/multifile/Index/upload?token=<?php echo element_safe_token('multiimage') ?>',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker_<?php echo $name ?>',
            chunked: true,
            formData: {
                "submittype": 'webupload'
            },
            compress: false,
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });

        //会员等级
        var UserGrade = '<?php echo json_encode($usergrades, JSON_UNESCAPED_UNICODE) ?>'
        var UserGradeObj = eval("(" + UserGrade + ")");
        var gradeselect = '';

        var <?php echo $name ?>_deep = <?php echo $vindx ?>;

        uploader.onFileQueued = function(file) {
            filename = file.name;
            file.orgname = filename;
            var index1 = filename.lastIndexOf(".");
            var index2 = filename.length;
            var ext = filename.substring(index1, index2); //后缀名
            file.name = WebUploader.guid() + ext;





            $('#table_<?php echo $name ?>').find('tbody').append('\
            <tr>\
                <td>\
                   <input class="layui-input" type=" text" name="<?php echo $name ?>[' + <?php echo $name ?>_deep + '][orgname]" value="' + file.orgname + '"/>\
                </td>\
                <td id="size_' + file.id + '"></td> \
                <td id="Progress_' + file.id + '">0% \
                </td>\
                <td> <a class="iconfont delfile<?php echo $name; ?>" fileid="' + file.id + '" style="padding-right:8px">&#xe607;</a>\
                 <a href="javascript:;" title="拖拽排序" class="drap" style="margin-right: 20px;cursor:move"> <i class="iconfont" style="font-size: 18px;">&#xe638;</i></a>\
                </td> \
                <input type="hidden" id="size_' + file.id + '_hide" value="" name="<?php echo $name ?>[' + <?php echo $name ?>_deep + '][size]" />\
                <input type="hidden" id="path_' + file.id + '_hide" value="" name="<?php echo $name ?>[' + <?php echo $name ?>_deep + '][path]" />\
            </tr> \
            ');
            <?php echo $name ?>_deep++;
            form.render();
        };
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function(file, percentage) {
            $('#Progress_' + file.id).html((percentage * 100).toFixed(2) + "%");
            // 具体逻辑...
        });
        uploader.on('uploadSuccess', function(file, response) {
            if (typeof(response.error) != 'undefined') {
                $('#size_' + file.id).parent().remove();
                if (typeof toastr_error === 'function') {
                    toastr_error(response.error.message);
                } else {
                    alert(response.error.message);
                }

            } else {
                $('#size_' + file.id).html(response.size);
                $('#size_' + file.id + '_hide').val(response.size);
                $('#path_' + file.id + '_hide').val(response.path);
                $('#Progress_' + file.id).html('<i class="iconfont" style="color:green">&#xe63c; </i>');
            }

        });


        $('body').on('click', '.delfile<?php echo $name; ?>', function() {

            $(this).parent().parent().remove();
        });




    });
</script>